<template>
	<view class="content">
		<view class="picker">
			<view class="picker_text">
				<image v-if="index !== ''" class="filter" src="/static/image/filter1.png"></image>
				<image v-else class="filter" src="/static/image/filter.png"></image>
				<view :class="{active:index!==''}">筛选：</view>
			</view>
			<picker @change="bindPickerChange" :value="index" :range="communityNameList" range-key="areaName">
				<view class="uni-input">{{ communityNameList[index].areaName || '请选择'}}</view>
			</picker>
			<view class="history-info" @click="goToPage()">审核记录</view>
		</view>
		<empty v-if="roomInfo.length == 0"></empty>
		<view class="roleCon" v-for="item in roomInfo" v-else>
			<view class="community-title">
					<!-- <view style="display: flex;flex-direction: row;"> -->
					<view style="font-size: 30upx;font-weight: bolder;">{{item.communityName}}</view>
					<!-- <view :class="item.applicationStatus == '0' ? 'status-tip examine-status-tip' : (item.applicationStatus == '1' ? 'status-tip pass-status-tip' : 'status-tip refuse-status-tip' )"
					 v-if="item.applicationStatus">
						{{item.applicationStatus == "0" ? "审核中" : (item.applicationStatus == "1" ? "已通过" : "已拒绝" )}}
					</view> -->
				<!-- </view> -->
				<view>
					<text class="yticon icon-rili" @click="navTo(item,'/package_isp/pages/family/houseDetail')" style="color:white;margin-right: 26upx;font-size: 26upx;">详情</text>
					<text class="yticon icon-iconfontshanchu1" @click="deleteBindCommunity(item)" style="color:red;margin-right: 40upx;font-size: 26upx;">删除</text>
				</view>
			</view>
			<view class="list-cell">
				<view class="list-cell-item">
					<view class="item-title">楼栋名称：</view>
					<view class="item-info">{{item.buildingName}}</view>
				</view>
				<view class="list-cell-item">
					<view class="item-title">单元编号：</view>
					<view class="item-info">{{item.unitName + "单元"}}</view>
				</view>
				<view class="list-cell-last">
					<view class="item-title">房屋编号：</view>
					<view class="item-info">{{item.roomNum}}</view>
				</view>
			</view>
		</view>
		<uni-popup :animation="true" type="center" ref="addHouse">
			<view style="width:600upx;background-color: white;border-radius: 20upx;border:none">
				<view class="popup-top">
					绑定房间
				</view>
				<view class="popup-middle">
					<view class="list-cell">
						<view class="list-cell-item">
							<view class="item-title">小区名称</view>
							<view class="item-info">
								<picker @change="bindCommunityNameChange" :range="communityNameList" range-key="areaName">
									<view class="picker_class">{{bindInfo.inputCommunityName}}</view>
								</picker>
							</view>
						</view>
						<view class="list-cell-item">
							<view class="item-title">楼栋名称</view>
							<view class="item-info">
								<picker @change="bindBuildingNameChange" :range="buildingNameList" range-key="name">
									<view class="picker_class">{{bindInfo.inputBuildingName}}</view>
								</picker>
							</view>
						</view>
						<view class="list-cell-item">
							<view class="item-title">单元编号</view>
							<view class="item-info">
								<picker @change="bindUnitNumChange" :range="unitNumList" range-key="unitNum">
									<view class="picker_class">{{bindInfo.inputUnitNum }}</view>
								</picker>
							</view>
						</view>
						<view class="list-cell-item">
							<view class="item-title">房屋编号</view>
							<view class="item-info">
								<picker @change="bindRoomNumChange" :range="roomNumList" range-key="roomNum">
									<view class="picker_class">{{bindInfo.inputRoomNum}}</view>
								</picker>
							</view>
						</view>
						<view class="list-cell-last">
							<view class="item-title">成员关系</view>
							<view class="item-info">
								<picker @change="changeRelation" :range="relations" range-key="value">
									<view class="input-class">{{bindInfo.relationName}}</view>
								</picker>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-bottom">
					<button class="cancel-btn" @click="cancelAddHouse">取消</button>
					<button class="confirm-btn" @click="confirmAddHouse">确认</button>
				</view>
			</view>
		</uni-popup>
		<view style="height: 140upx;"></view>
		<button type="primary" class="button_class" @click="showAddDialog">绑定房间</button>
	</view>
</template>

<script>
	import empty from "@/components/empty";
	export default {
		data() {
			return {
				bindInfo: {
					inputCommunityName: "未选择",
					inputCommunityCode: "",
					inputBuildingName: "未选择",
					inputBuildingId: "",
					inputUnitNum: "未选择",
					inputUnitId: "",
					inputRoomNum: "未选择",
					inputRoomId: "",
					relationName: "未选择",
					relationId: "",
				},
				index: null,
				roomInfo: [],
				communityNameList: [],
				buildingNameList: [],
				unitNumList: [],
				roomNumList: [],
				userId: "",
				areaCode: this.$api.util.getAreaCode(),
				relations: [{
					id: "1001",
					value: "业主"
				}, {
					id: "1002",
					value: "成员"
				}],
			}
		},
		components: {
			empty
		},
		onLoad() {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.userId = userInfo.userUuid
			}
			this.getDataList()
			this.inquiryCommunity()
		},
		methods: {
			getDataList() {
				let params = {
					"userId": this.userId,
					"areaCode": this.index ? this.communityNameList[this.index].areaCode : ""
				}
				this.$api.request.queryRoomInfoByUserId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.roomInfo = res.body.data.list
					}
				})
			},
			getBuildingByAreaCode(areaCode) {
				let params = {
					"communityId": areaCode
				}
				this.$api.request.getFloorsByCommunityId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.buildingNameList = res.body.data.floorEntities
					}
				}, false)
			},
			getUnitByFloorId(floorId) {
				let params = {
					"floorId": floorId
				}
				this.$api.request.getUnitsByFloorId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.unitNumList = res.body.data.unitEntities
					}
				}, false)
			},
			getRoomByUnitId(unitId) {
				let params = {
					"unitId": unitId
				}
				this.$api.request.getRoomsByUnitId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.roomNumList = res.body.data.roomEntities
					}
				}, false)
			},
			navTo(item, url) {
				uni.navigateTo({
					url: url + "?item=" + JSON.stringify(item)
				})
			},
			goToPage() {
				uni.navigateTo({
					url: "/package_mall/pages/user/examineRecord"
				})
			},
			removeRelationByUserId(roomId) {
				let params = {
					userUuid: this.userId,
					roomId: roomId
				}
				this.$api.request.removeRelationByUserId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.$api.msg("删除成功")
						this.getDataList()
					} else {
						this.$api.msg("删除失败")
					}
				})
			},
			deleteBindCommunity(item) {
				let _this = this;
				uni.showModal({
					title: "删除房间",
					content: "确认要删除该房间与您的绑定关系？删除后数据不可恢复！",
					success: function(res) {
						if (res.confirm) {
							_this.removeRelationByUserId(item.roomId)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			inquiryCommunity() {
				this.communityNameList = []
				let params = {
					areaCode: this.$api.request.communityCode,
					areaLevel: 15
				}
				this.$api.request.getResidenceByAreaCode(params, (res) => {
					if (res.body.status.statusCode === '0') {
						let communityNameList = res.body.data.list;
						for (let i = 0; i < communityNameList.length; i++) {
							let community = {
								areaName: communityNameList[i].areaName,
								areaCode: communityNameList[i].areaCode
							}
							this.communityNameList.push(community)
						}
					}
				})
			},
			showAddDialog() {
				if (this.roomInfo.length == 0) {
					// 没有绑定房间（未和用户绑定,须先判断是否还有绑定房间的审核正在进行）
					let params = {
						userId: this.userId
					}
					this.$api.request.hasApplication(params, (res) => {
                        if(res.body.status.statusCode == 0){
							let hasApplication = res.body.data.hasApplication;
							if(hasApplication){
								uni.navigateTo({
									url: "/package_mall/pages/user/bindCommunity"
								})
							}else{
								this.$api.msg("您的申请信息正在审核中，请等待审核完成后再次绑定！")
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "/package_mall/pages/user/bindRoom"
					})
				}


				// this.inquiryCommunity();
				// this.$refs.addHouse.open()
			},
			changeRelation(e) {
				let relation = this.relations[e.detail.value];
				this.bindInfo.relationId = relation.id;
				this.bindInfo.relationName = relation.value
			},
			bindCommunityNameChange(e) {
				this.bindInfo.inputCommunityName = this.communityNameList[e.detail.value].areaName;
				this.bindInfo.inputCommunityCode = this.communityNameList[e.detail.value].areaCode;
				this.getBuildingByAreaCode(this.bindInfo.inputCommunityCode);
			},
			bindBuildingNameChange(e) {
				this.bindInfo.inputBuildingName = this.buildingNameList[e.detail.value].name;
				this.bindInfo.inputBuildingId = this.buildingNameList[e.detail.value].floorId;
				this.getUnitByFloorId(this.bindInfo.inputBuildingId);
			},
			bindUnitNumChange(e) {
				this.bindInfo.inputUnitNum = this.unitNumList[e.detail.value].unitNum;
				this.bindInfo.inputUnitId = this.unitNumList[e.detail.value].unitId;
				this.getRoomByUnitId(this.bindInfo.inputUnitId);
			},
			bindRoomNumChange(e) {
				this.bindInfo.inputRoomNum = this.roomNumList[e.detail.value].roomNum;
				this.bindInfo.inputRoomId = this.roomNumList[e.detail.value].roomId;
			},
			cancelAddHouse() {
				this.$refs.addHouse.close()
			},
			bindPickerChange(e) {
				this.index = e.detail.value
				console.log(communityNameList[index].areaName)
				// this.getDataList()
			},
			confirmAddHouse() {
				if (this.bindInfo.inputRoomId == "") {
					this.$api.msg("请选择房屋信息")
					return;
				}
				if (this.bindInfo.relationId == "") {
					this.$api.msg("请选择成员信息")
					return;
				}
				let params = {
					roomId: this.bindInfo.inputRoomId,
					ownerTypeCd: this.bindInfo.relationId,
					userUuid: this.userId
				}
				this.$api.request.addRelationByUserId(params, (res) => {
					if (res.body.status.statusCode == "0") {
						this.$api.msg("新增成功")
						this.getDataList()
					} else {
						this.$api.msg("新增失败")
					}
					this.$refs.addHouse.close()
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		position: relative;
		background-color: $page-color-base;
	}

	.content {
		width: 100%;
		height: 100%;
		overflow: auto;
	}

	.roleCon {
		width: calc(100% - 40upx);
		margin: 20upx;
		background-color: white;
		border-radius: 20upx;
		overflow: hidden;
	}

	.community-title {
		color: white;
		padding-left: 40upx;
		height: 90upx;
		background: linear-gradient(to right, rgba(0, 171, 239, 1), rgba(0, 171, 239, 0.6));
		line-height: 90upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		letter-spacing: 2upx;
	}

	.popup-top {
		height: 90upx;
		line-height: 90upx;
		font-size: 32upx;
		padding-left: 30upx;
		font-weight: bolder;
		border-bottom: 1px solid #e9eef5;
	}

	.popup-middle {
		padding: 20upx 0upx;
	}

	.popup-bottom {
		display: flex;
		flex-direction: row;
		font-size: 26upx;
	}

	.cancel-btn {
		width: 50%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 0upx;
		border-bottom-left-radius: 20upx;
		background-color: $page-color-base;
		border-color: $page-color-base;
	}

	.confirm-btn {
		width: 50%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 0upx;
		border-bottom-right-radius: 20upx;
		background-color: #1DA3EE;
		color: white
	}

	.list-cell {
		padding: 20upx 30upx;

		.list-cell-item {
			height: 80upx;
			line-height: 80upx;
			border-bottom: 1px solid #e9eef5;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.item-title {
				font-size: 28upx;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-right: 20upx;
			}
		}

		.list-cell-last {
			height: 80upx;
			line-height: 80upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.item-title {
				font-size: 28upx;
				text-align: left;
				margin-left: 20upx;
			}

			.item-info {
				font-size: 24upx;
				text-align: right;
				margin-right: 20upx;
			}
		}
	}

	.button_class {
		position: fixed;
		z-index: 90;
		bottom: 40upx;
		margin-top: 20upx;
		width: 80%;
		margin-left: 10%;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #1fb0fe !important;
		color: white
	}

	.icon {
		width: 50upx;
		height: 50upx;
	}

	.status-tip {
		font-size: 24upx;
		color: #0B8AFC;
		border-radius: 10upx;
		border: 1upx solid #0B8AFC;
		height: 40upx;
		line-height: 38upx;
		margin-top: 25upx;
		width: 100upx;
		text-align: center;
		margin-left: 10upx;
	}

	.examine-status-tip {
		color: #0B8AFC;
		border: 1upx solid #0B8AFC;
	}

	.pass-status-tip {
		color: #05CC84;
		border: 1upx solid #05CC84;
	}

	.refuse-status-tip {
		color: #F93E3E;
		border: 1upx solid #F93E3E;
	}

	.picker {
		background-color: white;
		padding: 20upx;
		display: flex;
		align-items: center;
		color: #7A7A7A;
		font-size: 30upx;
		position: relative;
		z-index: 99;
	}

	.active {
		color: #3E9CF9;
	}

	.picker_text {
		display: flex;
		align-items: center;
	}

	.filter {
		width: 34upx;
		height: 34upx;
		margin-right: 8upx;
	}

	.history-info {
		margin-left: auto;
		color: #1fb0fe;
		font-size: 30upx;
	}
</style>
